<template>
  <div class="basic-box">
    <el-form
      :model="basicForm"
      :rules="basicRules"
      ref="basicForm"
      size="small"
      label-width="160px"
    >
      <div class="haruyuki-form-title">{{ basicTitleData.basicTitle }}</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="商户类型:" prop="userType">
            <el-select
              size="small"
              class="haruyuki-width-100"
              @change="merchantTypeChange"
              v-model="basicForm.userType"
              placeholder="请选择商户类型"
            >
              <el-option
                v-for="item in userTypeOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="行业大类:" prop="ysMerchantKey">
            <el-select
              size="small"
              class="haruyuki-width-100"
              @change="merchantKeyChange"
              v-model="basicForm.ysMerchantKey"
              placeholder="请选择行业大类"
              filterable
            >
              <el-option
                v-for="item in ysMerchantKeyOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行业类型:" prop="industryCode">
            <el-select
              size="small"
              class="haruyuki-width-100"
              @change="industryChange"
              v-model="basicForm.industryCode"
              placeholder="请选择行业类型"
              filterable
            >
              <el-option
                v-for="item in industryCodeOptions"
                :key="item.industryCode"
                :label="item.industryName"
                :value="item.industryCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行业类别:" prop="mccCd">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.mccCd"
              placeholder="请选择行业类别"
              filterable
            >
              <el-option
                v-for="item in mccCdOptions"
                :key="item.industryCode"
                :label="item.industryName"
                :value="item.industryCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="haruyuki-form-title basic-margin-top">
        {{ basicTitleData.personTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-if="isImgShow">
          <el-form-item label="法人身份证人像面:" prop="cardFront">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardFrontRequest"
              :limit="1"
              :file-list="cardFrontList"
              :on-remove="cardFrontRemove"
              :before-remove="beforecardFrontRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow">
          <el-form-item label="法人身份证国徽面:" prop="cardReverse">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpCardReverseRequest"
              :limit="1"
              :file-list="cardReverseList"
              :on-remove="cardReverseRemove"
              :before-remove="beforecardReverseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.userType == '3'">
          <el-form-item label="法人手持身份证:" prop="handHeld">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httphandHeldRequest"
              :limit="1"
              :file-list="handHeldList"
              :on-remove="handHeldRemove"
              :before-remove="beforehandHeldRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="法人姓名:" prop="legalPersonName">
            <el-input
              size="small"
              v-model="basicForm.legalPersonName"
              placeholder="请输入法人姓名"
              @change="legalPersonNameChange"
            ></el-input>
            <!-- @change="legalPersonNameChange" -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人性别:" prop="crpGender">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.crpGender"
              placeholder="请选择法人性别"
              @change="crpGenderChange"
            >
              <el-option
                v-for="item in crpGenderOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人职业:" prop="crpProfession">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.crpProfession"
              filterable
              placeholder="请输入法人职业"
              @change="crpProfessionChange"
            >
              <el-option
                v-for="item in crpProfessionOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人职务:" prop="crpProfessionLittle">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.crpProfessionLittle"
              filterable
              placeholder="请输入法人职务"
            >
              <el-option
                v-for="item in crpProfessionLittleOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="8">
          <el-form-item label="法人身份证号:" prop="legalPersonId">
            <el-input
              v-model="basicForm.legalPersonId"
              placeholder="请输入身份证号"
              @change="legalPersonIdChange"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证开始日期:" prop="legalPersonIdSdate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.legalPersonIdSdate"
              placeholder="请输入身份证开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="legalPersonIdSdateChange"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人身份证截止日期:" prop="legalPersonIdEdate">
            <el-date-picker
              type="date"
              class="haruyuki-width-100"
              v-model="basicForm.legalPersonIdEdate"
              placeholder="请输入身份证截止日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="legalPersonIdEdateChange"
            ></el-date-picker>
            <el-checkbox v-model="legalPersonIdEdateChecked" @change="legalPersonIdEdateCheckedChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人省市区:" prop="legalProvinceCityArea">
            <el-cascader
              v-if="isShow"
              class="haruyuki-width-100"
              v-model="basicForm.legalProvinceCityArea"
              :options="legalProvinceCityAreaOptions"
              :props="legalProvinceCityAreaProps"
              placeholder="请选择法人省市区"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人联系方式:" prop="legalPersonPhone">
            <el-input
              size="small"
              v-model="basicForm.legalPersonPhone"
              placeholder="请输入法人联系方式"
              @change="legalPersonPhoneChange"
            ></el-input>
            <!-- @change="legalPersonPhoneChange" -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="法人地址:" prop="crpAddr">
            <el-input
              type="textarea"
              v-model="basicForm.crpAddr"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div
        class="haruyuki-form-title basic-margin-top"
      >
        {{ basicTitleData.businessTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="24" v-if="isImgShow && basicForm.userType != '3'">
          <el-form-item label="营业执照原件照片:" prop="licensePic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpRoaLicenseRequest"
              :limit="1"
              :file-list="roaLicenseFileList"
              :on-remove="roaLicenseRemove"
              :before-remove="beforeroaLicenseRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="注册名称:" prop="registeredName">
            <el-input
              type="text"
              v-model="basicForm.registeredName"
              :placeholder="`请输入注册名称`"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门头名称:" prop="businessLicence">
            <el-input
              type="text"
              v-model="basicForm.businessLicence"
              :placeholder="`请输入门头名称`"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商户简称:" prop="userShortName">
            <el-input
              type="text"
              v-model="basicForm.userShortName"
              placeholder="请输入商户简称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="经营范围:" prop="businessScope">
            <el-input
              type="textarea"
              v-model="basicForm.businessScope"
              placeholder="请输入经营范围"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType == '1'">
          <el-form-item label="注册资金:" prop="businessRegisteredCapital">
            <el-input
              type="text"
              v-model="basicForm.businessRegisteredCapital"
              placeholder="请输入注册资金"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType == '0' || basicForm.userType == '1'">
          <el-form-item label="企业社会信用代码:" prop="businessLicenceNo">
            <el-input
              type="text"
              v-model="basicForm.businessLicenceNo"
              placeholder="请输入企业社会信用代码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType == '0' || basicForm.userType == '1'">
          <el-form-item label="营业执照开始日期:" prop="businessLicenceSDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.businessLicenceSDate"
              placeholder="请选择营业执照开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="businessLicenceSDateChange"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.userType != '3'">
          <el-form-item label="营业执照截止日期:" prop="businessLicenceEDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.businessLicenceEDate"
              placeholder="请输入营业执照截止日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <el-checkbox v-model="businessLicenceEDateChecked" @change="businessLicenceEDateCheckedChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所在区域:" prop="mercProvinceCityArea">
            <el-cascader
              v-if="isShow&&isShowMap"
              class="haruyuki-width-100"
              v-model="basicForm.mercProvinceCityArea"
              :options="mercProvinceCityAreaOptions"
              :props="mercProvinceCityAreaProps"
              placeholder="请选择所在区域"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
            <el-form-item label="详细地址:" prop="mapAddress">
              <el-input
                type="text"
                readonly
                v-model="basicForm.mapAddress"
                v-on:click.native="mapShow = true"
                placeholder="请选择详细地址"
              ></el-input>
            </el-form-item>
          </el-col> -->
        <el-col :span="24">
          <el-form-item label="经营地址:" prop="contactsAddr">
            <el-input
              type="textarea"
              v-model="basicForm.contactsAddr"
              placeholder="请输入经营地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- START 联系人 -->
      <div class="haruyuki-form-title basic-margin-top">
        {{ basicTitleData.linkmanTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="联系人类型:" prop="isLegal">
            <el-radio-group v-model="basicForm.isLegal" :disabled="isLegalDisabled" @change="isLegalChange">
              <el-radio label="1">联系人为法人</el-radio>
              <el-radio label="0">联系人为非法人</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.isLegal == '0'">
          <el-form-item label="联系人身份证人像面:" prop="contactFrontPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpContactFrontPicRequest"
              :limit="1"
              :file-list="contactFrontPicList"
              :on-remove="contactFrontPicRemove"
              :before-remove="beforecontactFrontPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.isLegal == '0'">
          <el-form-item label="联系人身份证国徽面:" prop="contactReversePic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpContactReversePicRequest"
              :limit="1"
              :file-list="contactReversePicList"
              :on-remove="contactReversePicRemove"
              :before-remove="beforecontactReversePicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.isLegal == '0'">
          <el-form-item label="业务办理授权函:" prop="authLetterPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpAuthLetterPicRequest"
              :limit="1"
              :file-list="authLetterPicList"
              :on-remove="authLetterPicRemove"
              :before-remove="beforeauthLetterPicRemove"
              :on-exceed="authLetterPicExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人姓名:" prop="contactsName">
            <el-input
              type="text"
              v-model="basicForm.contactsName"
              placeholder="请输入联系人姓名"
              :disabled="isLegalban"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式:" prop="contactsPhone">
            <el-input
              type="tel"
              v-model="basicForm.contactsPhone"
              placeholder="请输入联系方式"
              :disabled="isLegalban"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人性别:" prop="contactsGender">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.contactsGender"
              placeholder="请选择联系人性别"
              :disabled="isLegalban"
            >
              <el-option
                v-for="item in crpGenderOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人身份证号:" prop="contactPersonId">
            <el-input
              v-model="basicForm.contactPersonId"
              placeholder="请输入联系人身份证号"
              :disabled="isLegalban"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人身份证开始日期:" prop="idValiddateBegin">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.idValiddateBegin"
              placeholder="请输入身份证开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="isLegalban"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人身份证截止日期:" prop="idValiddateEnd">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.idValiddateEnd"
              placeholder="请输入身份证截止日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
              :disabled="isLegalban"
            ></el-date-picker>
            <el-checkbox v-model="idValiddateEndChecked" :disabled="isLegalban" @change="idValiddateEndCheckedChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人邮箱:" prop="contactsEmail">
            <el-input
              type="email"
              v-model="basicForm.contactsEmail"
              placeholder="请输入联系人邮箱"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END 联系人 -->
      <!-- START 其他 -->
      <div class="haruyuki-form-title basic-margin-top">
        {{ basicTitleData.otherTitle }}
      </div>
      <el-row :gutter="20">
        <!-- <el-col :span="8">
          <el-form-item label="服务商名称:" prop="serNo">
            <select-page ref="searchSerSelect" label="serviceName" value="serviceNo" :select.sync="basicForm.serNo" :url="website.searchLink.serviceUrl" placeholder-text="服务商" filter-key="searchParam"></select-page>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户经理:" prop="accountManager">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.accountManager"
              placeholder="请选择客户经理"
              filterable
              clearable
            >
              <el-option
                v-for="item in accountManagerOptions"
                :key="item.userNo"
                :label="item.userName"
                :value="item.userNo"
              >
                <span style="float: left">{{ item.userName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="拓展经理姓名:" prop="expandingManager">
            <el-input
              type="text"
              v-model="basicForm.expandingManager"
              placeholder="请输入拓展经理姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐人:" prop="referrer">
            <el-input
              type="text"
              v-model="basicForm.referrer"
              placeholder="请输入推荐人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" prop="remark">
            <el-input
              type="textarea"
              v-model="basicForm.remark"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END 其他 -->
      <!-- START 控股人 -->
      <div class="haruyuki-form-title basic-margin-top">
        {{ basicTitleData.shareholderTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="实际控股人类型:" prop="holdPrsnIsLegal">
            <el-radio-group v-model="basicForm.holdPrsnIsLegal" :disabled="holdPrsnIsLegalDisabled">
              <el-radio label="1">实际控股人为法人</el-radio>
              <el-radio label="0">实际控股人为非法人</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人身份证人像面:" prop="holdPrsnCertMfgPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpHoldPrsnCertMfgPicRequest"
              :limit="1"
              :file-list="holdPrsnCertMfgPicList"
              :on-remove="holdPrsnCertMfgPicRemove"
              :before-remove="beforeholdPrsnCertMfgPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人身份证国徽面:" prop="holdPrsnCertExpPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpHoldPrsnCertExpPicRequest"
              :limit="1"
              :file-list="holdPrsnCertExpPicList"
              :on-remove="holdPrsnCertExpPicRemove"
              :before-remove="beforeholdPrsnCertExpPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="8" v-if="basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人姓名:" prop="holdPrsnCertName">
            <el-input
              type="text"
              v-model="basicForm.holdPrsnCertName"
              placeholder="请输入控股人姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人联系方式:" prop="holdPrsnMobile">
            <el-input
              type="tel"
              v-model="basicForm.holdPrsnMobile"
              placeholder="请输入控股人联系方式"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人性别:" prop="holdPrsnGender">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.holdPrsnGender"
              placeholder="请选择控股人性别"
            >
              <el-option
                v-for="item in crpGenderOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人身份证号:" prop="holdPrsnCertNo">
            <el-input
              v-model="basicForm.holdPrsnCertNo"
              placeholder="请输入控股人身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人身份证开始日期:" prop="holdPrsnCertMfgDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.holdPrsnCertMfgDate"
              placeholder="请输入身份证开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.holdPrsnIsLegal == '0'">
          <el-form-item label="控股人身份证截止日期:" prop="holdPrsnCertExpDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.holdPrsnCertExpDate"
              placeholder="请输入身份证截止日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <el-checkbox v-model="holdPrsnCertExpDateChecked" @change="holdPrsnCertExpDateCheckedChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END 控股人 -->

      <!-- START 受益人 -->
      <div class="haruyuki-form-title basic-margin-top">
        {{ basicTitleData.beneficiaryTitle }}
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="实际受益人类型:" prop="receiptorIsLegal">
            <el-radio-group v-model="basicForm.receiptorIsLegal" :disabled="receiptorIsLegalDisabled">
              <el-radio label="1">实际受益人为法人</el-radio>
              <el-radio label="0">实际受益人为非法人</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人身份证人像面:" prop="receiptorCertMfgPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpReceiptorCertMfgPicRequest"
              :limit="1"
              :file-list="receiptorCertMfgPicList"
              :on-remove="receiptorCertMfgPicRemove"
              :before-remove="beforereceiptorCertMfgPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="isImgShow && basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人身份证国徽面:" prop="receiptorCertExpPic">
            <el-upload
              action="/api/blade-resource/oss/endpoint/put-file-attach"
              list-type="picture-card"
              :http-request="httpReceiptorCertExpPicRequest"
              :limit="1"
              :file-list="receiptorCertExpPicList"
              :on-remove="receiptorCertExpPicRemove"
              :before-remove="beforereceiptorCertExpPicRemove"
              :on-exceed="handHeldExceed"
              :before-upload="beforeUpload"
              :on-preview="imgPreview"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人姓名:" prop="receiptorName">
            <el-input
              type="text"
              v-model="basicForm.receiptorName"
              placeholder="请输入受益人姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人联系方式:" prop="receiptorMobile">
            <el-input
              type="tel"
              v-model="basicForm.receiptorMobile"
              placeholder="请输入受益人联系方式"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人性别:" prop="receiptorGender">
            <el-select
              size="small"
              class="haruyuki-width-100"
              v-model="basicForm.receiptorGender"
              placeholder="请选择受益人性别"
            >
              <el-option
                v-for="item in crpGenderOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人身份证号:" prop="receiptorCertNo">
            <el-input
              v-model="basicForm.receiptorCertNo"
              placeholder="请输入受益人身份证号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人身份证开始日期:" prop="receiptorCertMfgDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.receiptorCertMfgDate"
              placeholder="请输入身份证开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人身份证截止日期:" prop="receiptorCertExpDate">
            <el-date-picker
              class="haruyuki-width-100"
              type="date"
              v-model="basicForm.receiptorCertExpDate"
              placeholder="请输入身份证截止日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
            <el-checkbox v-model="receiptorCertExpDateChecked" @change="receiptorCertExpDateCheckedChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人所在区域:" prop="receiptorProvinceCityArea">
            <el-cascader
              v-if="isShow"
              class="haruyuki-width-100"
              v-model="basicForm.receiptorProvinceCityArea"
              :options="legalProvinceCityAreaOptions"
              :props="legalProvinceCityAreaProps"
              placeholder="请选择所在区域"
              clearable
              filterable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="basicForm.receiptorIsLegal == '0'">
          <el-form-item label="受益人详细地址:" prop="receiptorAdderss">
            <el-input
              type="textarea"
              v-model="basicForm.receiptorAdderss"
              placeholder="请输入受益人详细地址"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- END 受益人 -->
    </el-form>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </div>
</template>

<script>
// import { getList, getMccIndustryList, getMccList, getAccountManagerList } from "@/api/rb-service/posinfo/pos_info";
import { getMccIndustryList, getMccList, getAccountManagerList, getCrpProfession } from "@/api/rb-oem/posinfo/pos_info";
import { getList as getchildServiceList } from "@/api/rb-oem/serviceinfo/service_info";
import { getDictionary, getRegion, getCityCode } from "@/api/system/dict";
import { uploadPrivate, uploadOCRCard } from "@/api/system/oss";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  props: {
    basicForm: Object,
    isImgShow: { //是否显示 客服会话框 默认显示
      type: Boolean,
      default: true
    },
  },
  components: {
  },
  data() {
    return {
      isShowMap:true,
      // mapShow:false,
      imgShow:false,
      imgUrlList:[],
      basicTitleData: {
        basicTitle: "行业信息",
        personTitle: "法人信息",
        businessTitle: "企业信息",
        linkmanTitle: "联系人信息",
        otherTitle: "其他信息",
        shareholderTitle: "控股人信息",
        beneficiaryTitle: "受益人信息"
      },
      basicRules: {
        userType: [
          { required: true, message: "请选择商户类型", trigger: "blur" },
        ],
        ysMerchantKey: [
          { required: true, message: "请选择行业大类", trigger: "blur" },
        ],
        industryCode: [
          { required: true, message: "请选择行业类型", trigger: "blur" },
        ],
        mccCd: [
          { required: true, message: "请选择行业MCC码", trigger: "blur" },
        ],
        // mccList: [
        //   { required: true, message: "请选择行业MCC码", trigger: "blur" },
        // ],
        userShortName: [
          { required: true, message: "请输入商户简称", trigger: "blur" },
        ],
        handHeld: [
          { required: true, message: "请上传法人手持身份证", trigger: "blur" },
        ],
        cardFront: [
          {
            required: true,
            message: "请上传法人身份证人像面",
            trigger: "blur",
          },
        ],
        cardReverse: [
          {
            required: true,
            message: "请上传法人身份证国徽面",
            trigger: "blur",
          },
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        crpGender: [
          { required: true, message: "请输入法人性别", trigger: "blur" },
        ],
        legalPersonPhone: [
          { required: true, message: "请输入法人联系方式", trigger: "blur" },
          { pattern: /^1[0-9]{10}$/, message: '法人联系方式格式不正确',trigger: 'blur' }
        ],
        crpProfession: [
          { required: true, message: "请输入法人职业", trigger: "blur" },
        ],
        crpProfessionLittle: [
          { required: true, message: "请输入法人职务", trigger: "blur" },
        ],
        legalPersonId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        legalPersonIdSdate: [
          {
            required: true,
            message: "请选择法人身份证开始日期",
            trigger: "blur",
          },
        ],
        legalPersonIdEdate: [
          {
            required: true,
            message: "请选择法人身份证截止日期",
            trigger: "blur",
          },
        ],
        legalProvinceCityArea: [
          { required: true, message: "请选择法人省市区", trigger: "blur" },
        ],
        crpAddr: [
          { required: true, message: "请输入法人地址", trigger: "blur" },
        ],
        licensePic: [
          { required: true, message: "请上传营业执照原件照片", trigger: "blur" },
        ],
        registeredName: [
          { required: true, message: `请输入注册名称`, trigger: "blur" },
        ],
        businessLicence: [
          { required: true, message: `请输入门头名称`, trigger: "blur" },
        ],
        mercProvinceCityArea: [
          { required: true, message: "请选择法人省市区", trigger: "blur" },
        ],
        // mapAddress: [
        //   { required: true, message: "请选择详细地址", trigger: "change" },
        // ],
        contactsAddr: [
          { required: true, message: "请输入经营地址", trigger: "blur" },
        ],
        businessRegisteredCapital: [
          { required: true, message: "请输入注册资金", trigger: "blur" },
        ],
        businessScope: [
          { required: true, message: "请输入经营范围", trigger: "blur" },
        ],
        businessLicenceNo: [
          { required: true, message: "请输入企业社会信用代码", trigger: "blur" },
        ],
        businessLicenceSDate: [
          {
            required: true,
            message: "请选择营业执照开始日期",
            trigger: "blur",
          },
        ],
        businessLicenceEDate: [
          {
            required: true,
            message: "请选择营业执照截止日期",
            trigger: "blur",
          },
        ],
        isLegal: [
          { required: true, message: "请选择联系人类型", trigger: "blur" },
        ],
        authLetterPic: [
          { required: true, message: "请输入业务办理授权函", trigger: "blur" },
        ],
        contactFrontPic: [
          { required: true, message: "请输入联系人身份证人像面", trigger: "blur" },
        ],
        contactReversePic: [
          { required: true, message: "请输入联系人身份证国徽面", trigger: "blur" },
        ],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        contactsPhone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { pattern: /^1[0-9]{10}$/, message: '联系方式格式不正确',trigger: 'blur' }
        ],
        contactsGender: [
          { required: true, message: "请选择联系人性别", trigger: "blur" },
        ],
        contactsEmail: [
          { required: true, message: "请输入联系人邮箱", trigger: "blur" },
          { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/, message: '联系人邮箱格式不正确',trigger: 'blur' }
        ],
        contactPersonId: [
          { required: true, message: "请输入联系人身份证号", trigger: "blur" },
        ],
        idValiddateBegin: [
          { required: true, message: "请选择联系人身份证开始日期", trigger: "blur" },
        ],
        idValiddateEnd: [
          { required: true, message: "请选择联系人身份证截止日期", trigger: "blur" },
        ],
        holdPrsnIsLegal: [
          { required: true, message: "请选择实际控股人类型", trigger: "blur" },
        ],
        holdPrsnCertMfgPic: [
          { required: true, message: "请上传控股人身份证人像面", trigger: "blur" },
        ],
        holdPrsnCertExpPic: [
          { required: true, message: "请上传控股人身份证国徽面", trigger: "blur" },
        ],
        holdPrsnCertName: [
          { required: true, message: "请输入控股人姓名", trigger: "blur" },
        ],
        holdPrsnCertNo: [
          { required: true, message: "请输入控股人身份证号", trigger: "blur" },
        ],
        holdPrsnMobile: [
          { required: true, message: "请输入控股人联系方式", trigger: "blur" },
        ],
        holdPrsnGender: [
          { required: true, message: "请选择控股人性别", trigger: "blur" },
        ],
        holdPrsnCertMfgDate: [
          { required: true, message: "请选择控股人身份证开始日期", trigger: "blur" },
        ],
        holdPrsnCertExpDate: [
          { required: true, message: "请选择控股人身份证截止日期", trigger: "blur" },
        ],
        receiptorIsLegal: [
          { required: true, message: "请选择实际受益人类型", trigger: "blur" },
        ],
        receiptorCertMfgPic: [
          { required: true, message: "请上传受益人身份证人像面", trigger: "blur" },
        ],
        receiptorCertExpPic: [
          { required: true, message: "请上传受益人身份证国徽面", trigger: "blur" },
        ],
        receiptorName: [
          { required: true, message: "请输入受益人姓名", trigger: "blur" },
        ],
        receiptorCertNo: [
          { required: true, message: "请输入受益人身份证号", trigger: "blur" },
        ],
        receiptorMobile: [
          { required: true, message: "请输入受益人联系方式", trigger: "blur" },
        ],
        receiptorGender: [
          { required: true, message: "请选择受益人性别", trigger: "blur" },
        ],
        receiptorCertMfgDate: [
          { required: true, message: "请选择受益人身份证开始日期", trigger: "blur" },
        ],
        receiptorCertExpDate: [
          { required: true, message: "请选择受益人身份证截止日期", trigger: "blur" },
        ],
        receiptorProvinceCityArea: [
          { required: true, message: "请选择受益人所在区域", trigger: "blur" },
        ],
        receiptorAdderss: [
          { required: true, message: "请输入受益人详细地址", trigger: "blur" },
        ],
      },
      userTypeOptions: [],
      ysMerchantKeyOptions: [],
      industryCodeOptions: [],
      mccCdOptions: [],
      groupMerchantOptions: [],
      // mccOptions: [],
      // mccProps: {
      //   label: "industryName",
      //   value: "industryCode",
      //   userType: '',
      //   lazy: true,
      //   async lazyLoad(node, resolve) {
      //     let stop_level = 1;
      //     let level = node.level;
      //     let data = node.data || {};
      //     let industryCode = data.industryCode;
      //     console.log(this.userType, level, 'nodenodenode')
      //     let list = [];
      //     let callback = () => {
      //       resolve(
      //         (list || []).map((ele) => {
      //           return Object.assign(ele, {
      //             leaf: level >= stop_level,
      //           });
      //         })
      //       );
      //     };
      //     if (level == 0 && this.userType) {
      //       getMccIndustryList(this.userType).then(
      //         (res) => {
      //           list = res.data.data;
      //           callback();
      //         },
      //         (error) => {
      //           window.console.log(error);
      //         }
      //       );
      //     } else if (level == 1) {
      //       getMccList("-1", "-1", industryCode).then(
      //         (res) => {
      //           list = res.data.data;
      //           callback();
      //         },
      //         (error) => {
      //           window.console.log(error);
      //         }
      //       );
      //     } else {
      //       callback();
      //     }
      //   },
      // },
      legalProvinceCityAreaOptions: [],
      legalProvinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      mercProvinceCityAreaOptions: [],
      mercProvinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      accountManagerOptions: [], //客户经理列表
      serNoOptions: [], //服务商列表
      crpGenderOptions: [],
      crpProfessionOptions: [],
      crpProfessionLittleOptions: [],
      roaLicenseFileList: [],
      handHeldList: [],
      cardFrontList: [],
      cardReverseList: [],
      authLetterPicList: [],
      contactFrontPicList: [],
      contactReversePicList: [],
      holdPrsnCertMfgPicList: [], //控股人身份证人像面 list
      holdPrsnCertExpPicList: [], //控股人身份证国徽面 list
      receiptorCertMfgPicList: [], //受益人身份证人像面 list
      receiptorCertExpPicList: [], //受益人身份证国徽面 list
      isLegalban: true, //联系人类型控制禁止内容 法人true/非法人false 默认为法人
      isLegalDisabled: false, //联系人类型是否禁止
      holdPrsnIsLegalDisabled: false, //控股人类型是否禁止
      receiptorIsLegalDisabled: false, //受益人类型是否禁止
      legalPersonIdEdateChecked: false,
      businessLicenceEDateChecked: false,
      idValiddateEndChecked: false,
      holdPrsnCertExpDateChecked: false,
      receiptorCertExpDateChecked: false,
      contactsData: {}, //联系人赋值信息
      isShow: true,
    };
  },
  computed: {
    merchantMccType() {
      const { userType, ysMerchantKey } = this.basicForm;
      return {
        userType,
        ysMerchantKey
      }
    }
  },
  watch: {
    merchantMccType(data) {
      if (data) {
        if (data.userType) {
          this.$emit('userTypeChange', data.userType);
        }
        if (data.userType && data.ysMerchantKey) {
          this.getMccIndustry(data.userType, data.ysMerchantKey)
        }
        if (data.userType == '3') {
          this.isLegalDisabled = true;
          this.holdPrsnIsLegalDisabled = true;
          this.receiptorIsLegalDisabled = true;
          this.basicForm.isLegal = '1';
          this.basicForm.holdPrsnIsLegal = '1';
          this.basicForm.receiptorIsLegal = '1';
        } else {
          this.isLegalDisabled = false;
          this.holdPrsnIsLegalDisabled = false;
          this.receiptorIsLegalDisabled = false;
        }
      }
    },
    // "basicForm.userType"(val) {
    //   if (val) {
    //     this.$emit('userTypeChange', val);
    //     // this.getMccIndustry(val)
    //   }
    // },
    // "basicForm.ysMerchantKey"(val) {
    //   if (val) {
    //     this.getMccIndustry(this.merUserType, val)
    //   }
    // },
    "basicForm.industryCode"(val) {
      if (val) {
        this.getMccChildren(val)
      }
    },
    "basicForm.isLegal"(val) { //联系人类型 0联系人为非法人 1联系人为法人
      if (val == '0') {
        this.isLegalban = false;
        
      } else if (val == '1') {
        this.isLegalban = true;
        this.basicForm.contactsName = this.basicForm.legalPersonName;
        this.basicForm.contactsGender = this.basicForm.crpGender;
        this.basicForm.contactsPhone = this.basicForm.legalPersonPhone;
        this.basicForm.contactPersonId = this.basicForm.legalPersonId;
        this.basicForm.idValiddateBegin = this.basicForm.legalPersonIdSdate;
        this.basicForm.idValiddateEnd = this.basicForm.legalPersonIdEdate;
      }
    },
    "basicForm.legalPersonIdEdate"(date) { //法人信息 法人身份证截止日期
      if (date == '2999-12-31 00:00:00') {
        this.legalPersonIdEdateChecked = true;
      }
    },
    "basicForm.businessLicenceEDate"(date) { //企业信息 营业执照截止日期
      if (date == '2999-12-31 00:00:00') {
        this.businessLicenceEDateChecked = true;
      }
    },
    "basicForm.idValiddateEnd"(date) { //联系人 身份证截止日期
      if (date == '2999-12-31 00:00:00') {
        this.idValiddateEndChecked = true;
      }
    },
    "basicForm.holdPrsnCertExpDate"(date) { //控股人 身份证截止日期
      if (date == '2999-12-31 00:00:00') {
        this.holdPrsnCertExpDateChecked = true;
      }
    },
    "basicForm.receiptorCertExpDate"(date) { //受益人 身份证截止日期
      if (date == '2999-12-31 00:00:00') {
        this.receiptorCertExpDateChecked = true;
      }
    },
    "basicForm.contactFrontPic"(img) { //联系人身份证人像面
      if (img) {
        this.contactsData = {
          contactsName: this.basicForm.contactsName,
          contactsPhone: this.basicForm.contactsPhone,
          contactPersonId: this.basicForm.contactPersonId,
          idValiddateBegin: this.basicForm.idValiddateBegin,
          idValiddateEnd: this.basicForm.idValiddateEnd,
        }
      }
    }
  },
  created() {
    this.doGetDicts();
  },
  mounted() {},
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "user_income_type"}).then((res) => {
        this.userTypeOptions = res.data.data;
      });
      getDictionary({code: "crp_gender"}).then((res) => {
        this.crpGenderOptions = res.data.data;
      });
      getDictionary({code: "crp_profession"}).then((res) => {
        this.crpProfessionOptions = res.data.data;
      });
      this.getMccMerchantKey();
      getAccountManagerList({createUser: ""}).then((res) => {
        this.accountManagerOptions = res.data.data;
      });
      getchildServiceList( '-1', '-1').then((res) => {
        this.serNoOptions = res.data.data;
      });
      // getList( '-1', '-1', 1).then((res) => { //集团商户
      //   this.groupMerchantOptions = res.data.data.records;
      // });
    },
    // getMccIndustry(val) {
    //   let stop_level = 1;
    //   let list = [];
    //   getMccIndustryList(val).then(
    //     (res) => {
    //       list = res.data.data;
    //       list.map((ele) => {
    //         Object.assign(ele, {
    //           leaf: 0 >= stop_level,
    //         });
    //       });
    //       this.mccOptions = list;
    //     },
    //     (error) => {
    //       window.console.log(error);
    //     }
    //   );
    // },
    /* 行业大类 interface */
    getMccMerchantKey() {
      getDictionary({code: "ys_merchant_type"}).then((res) => {
        this.ysMerchantKeyOptions = res.data.data;
      });
    },
    /* 行业类型 interface */
    getMccIndustry(userType, ysMerchantKey) {
      getMccIndustryList(userType, ysMerchantKey).then(
        (res) => {
          this.industryCodeOptions = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 行业类别 interface */
    getMccChildren(industryCode) {
      getMccList("-1", "-1", industryCode).then(
        (res) => {
          this.mccCdOptions = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 商户类型 change */
    merchantTypeChange(e) {
      if (e) {
        this.basicForm.industryCode = '';
        this.basicForm.mccCd = '';
      }
    },
    /* 行业大类 change */
    merchantKeyChange(e) {
      if (e) {
        this.basicForm.industryCode = '';
        this.basicForm.mccCd = '';
      }
    },
    /* 行业类型 change */
    industryChange(e) {
      if (e) {
        this.basicForm.mccCd = '';
      }
    },
    /* 联系人类型 change */
    isLegalChange(e) {
      if (e == '0') {
        if (JSON.stringify(this.basicForm.contactsData) !== "{}") {
          this.basicForm.contactsName = this.contactsData.contactsName;
          this.basicForm.contactsPhone = this.contactsData.contactsPhone;
          this.basicForm.contactPersonId = this.contactsData.contactPersonId;
          this.basicForm.idValiddateBegin = this.contactsData.idValiddateBegin;
          this.basicForm.idValiddateEnd = this.contactsData.idValiddateEnd;
        }
      }
    },
    /* 营业执照开始时间 change */
    businessLicenceSDateChange() {
    // businessLicenceSDateChange(e) {
    //   let date = /\d{4}-\d{1,2}-\d{1,2}/g.exec(e)[0].replace(/-/g,'');
    //   console.log(date, 'datedatedate');
    },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file)
    // },
    // beforeUpload(file) {
    //   const isJPG = file.type === "image/jpeg" || file.type === "image/png";
    //   if (!isJPG) {
    //     this.$message.error("上传图片只能是 JPG 和 Png 格式!");
    //     return false;
    //   }
    //   /* 图片压缩 */
    //   const _this = this
    //   return new Promise(resolve => {
    //     const reader = new FileReader()
    //     const image = new Image()
    //     image.onload = () => {
    //       const canvas = document.createElement('canvas');
    //       const context = canvas.getContext('2d');
    //       const originWidth = image.width
    //       const originHeight = image.height
    //       // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
    //       let maxWidth = 1280, maxHeight = 1280
    //       // 目标尺寸
    //       let targetWidth = originWidth, targetHeight = originHeight
    //       // 图片尺寸超过800x800的限制
    //       if (originWidth > maxWidth || originHeight > maxHeight) {
    //         if (originWidth / originHeight > maxWidth / maxHeight) {
    //           // 更宽，按照宽度限定尺寸
    //           targetWidth = maxWidth;
    //           targetHeight = Math.round(maxWidth * (originHeight / originWidth));
    //         } else {
    //           targetHeight = maxHeight;
    //           targetWidth = Math.round(maxHeight * (originWidth / originHeight));
    //         }
    //       }
    //       canvas.width = targetWidth
    //       canvas.height = targetHeight
    //       context.clearRect(0, 0, targetWidth, targetHeight)
    //       context.drawImage(image, 0, 0, targetWidth, targetHeight)
    //       const dataUrl = canvas.toDataURL('image/jpeg', 0.8)
    //       const blobData = _this.dataURItoBlob(dataUrl, 'image/jpeg')
    //       resolve(blobData)
    //     }
    //     reader.onload = (e => { image.src = e.target.result; })
    //     reader.readAsDataURL(file)
    //     return true;
    //   })

    // },
    /* 将base64转换为blob */
    // dataURItoBlob(dataURI, type) {
    //   var binary = atob(dataURI.split(',')[1]);
    //   var array = [];
    //   for(var i = 0; i < binary.length; i++) {
    //     array.push(binary.charCodeAt(i));
    //   }
    //   return new Blob([new Uint8Array(array)], {type: type});
    // },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 营业执照照片上传 */
    httpRoaLicenseRequest(option) {
      uploadOCRCard(option.file, "5").then((res) => {
        this.basicForm.licensePic = res.data.data.link;
        this.basicForm.registeredName = res.data.data.companyName; //注册名称
        this.basicForm.businessLicence = res.data.data.companyName; //门头名称
        this.basicForm.userShortName = res.data.data.companyName; //商户简称
        this.basicForm.businessLicenceNo = res.data.data.creditCode;
        this.basicForm.businessScope = res.data.data.businessScope; //经营范围
        this.basicForm.businessRegisteredCapital = res.data.data.registeredCapital; //注册资金
        this.basicForm.contactsAddr = res.data.data.businessAddress;
        if (res.data.data.validFromDate) {
          this.basicForm.businessLicenceSDate = res.data.data.validFromDate;
          this.basicForm.businessLicenceEDate = res.data.data.validToDate;
        } else {
          this.basicForm.businessLicenceSDate = this.formattedDate(res.data.data.registrationDate)+' 00:00:00';
          this.basicForm.businessLicenceEDate = '2999-12-31 00:00:00';
          this.businessLicenceEDateChecked = true;
        }
        this.$refs.basicForm.validateField("licensePic");
      });
    },
    /* 营业执照照片删除 */
    roaLicenseRemove(file, fileList) {
      this.roaLicenseFileList = fileList;
      this.basicForm.licensePic = "";
    },
    beforeroaLicenseRemove() {
      return this.$confirm(`确定移除营业执照照片？`);
    },
    formattedDate(date) {
      let parts = date.match(/(\d{4})年(\d{2})月(\d{2})日/);
      if (parts) {
        let year = parts[1];
        let month = parts[2];
        let day = parts[3];
        return `${year}-${month}-${day}`;
      } else {
        return '';
      }
    },
    /* 法人手持身份证上传 */
    httphandHeldRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.handHeld = res.data.data.name;
        this.$refs.basicForm.validateField("handHeld");
      });
    },
    /* 法人手持身份证删除 */
    handHeldRemove(file, fileList) {
      this.handHeldList = fileList;
      this.basicForm.handHeld = "";
    },
    beforehandHeldRemove() {
      return this.$confirm(`确定移除法人手持身份证？`);
    },
    /* 法人身份证人像面上传 */
    httpCardFrontRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.basicForm.cardFront = data.link;
        this.basicForm.legalPersonName = data.name;
        this.basicForm.registeredName = data.name;
        this.basicForm.legalPersonId = data.num;
        this.basicForm.crpGender = data.sex;
        this.basicForm.crpAddr = data.address;
        if (this.basicForm.isLegal == '1') {
          this.basicForm.contactsName = this.basicForm.legalPersonName; //联系人名称
          this.basicForm.contactsGender = this.basicForm.crpGender;
          this.basicForm.contactPersonId = this.basicForm.legalPersonId;
        }
        this.$refs.basicForm.validateField("cardFront");
      });
    },
    /* 法人身份证人像面删除 */
    cardFrontRemove(file, fileList) {
      this.cardFrontList = fileList;
      this.basicForm.cardFront = "";
    },
    beforecardFrontRemove() {
      return this.$confirm(`确定移除法人身份证人像面照片？`);
    },
    /* 法人身份证国徽面上传 */
    httpCardReverseRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.basicForm.cardReverse = res.data.data.link;
        this.basicForm.legalPersonIdSdate = res.data.data.startDate;
        this.basicForm.legalPersonIdEdate = res.data.data.endDate;
        if (this.basicForm.isLegal == '1') {
          this.basicForm.idValiddateBegin = this.basicForm.legalPersonIdSdate;
          this.basicForm.idValiddateEnd = this.basicForm.legalPersonIdEdate;
        }
        this.$refs.basicForm.validateField("cardReverse");
      });
    },
    /* 法人身份证国徽面删除 */
    cardReverseRemove(file, fileList) {
      this.cardReverseList = fileList;
      this.basicForm.cardReverse = "";
    },
    beforecardReverseRemove() {
      return this.$confirm(`确定移除法人身份证国徽面照片？`);
    },
    /* 业务办理授权函上传 */
    httpAuthLetterPicRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.authLetterPic = res.data.data.name;
        this.$refs.basicForm.validateField("authLetterPic");
      });
    },
    /* 业务办理授权函删除 */
    authLetterPicRemove(file, fileList) {
      this.authLetterPicList = fileList;
      this.basicForm.authLetterPic = "";
    },
    beforeauthLetterPicRemove() {
      return this.$confirm(`确定移除业务办理授权函照片？`);
    },
    /* 联系人身份证人像面上传 */
    httpContactFrontPicRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.basicForm.contactFrontPic = data.link;
        this.basicForm.contactsName = data.name; //联系人名称
        this.basicForm.contactPersonId = data.num;
        this.basicForm.contactsGender = data.sex;
        this.$refs.basicForm.validateField("contactFrontPic");
      });
    },
    /* 联系人身份证人像面删除 */
    contactFrontPicRemove(file, fileList) {
      this.contactFrontPicList = fileList;
      this.basicForm.contactFrontPic = "";
    },
    beforecontactFrontPicRemove() {
      return this.$confirm(`确定移除联系人身份证人像面照片？`);
    },
    /* 联系人身份证国徽面上传 */
    httpContactReversePicRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.basicForm.contactReversePic = res.data.data.link;
        this.basicForm.idValiddateBegin = res.data.data.startDate;
        this.basicForm.idValiddateEnd = res.data.data.endDate;
        this.$refs.basicForm.validateField("contactReversePic");
      });
    },
    /* 联系人身份证国徽面删除 */
    contactReversePicRemove(file, fileList) {
      this.contactReversePicList = fileList;
      this.basicForm.contactReversePic = "";
    },
    beforecontactReversePicRemove() {
      return this.$confirm(`确定移除联系人身份证国徽面照片？`);
    },
    /* 法人赋值于联系人 */
    legalPersonNameChange(e) {
      if (this.basicForm.isLegal == '1') {
        this.basicForm.contactsName = e;
        this.$refs.basicForm.validateField("contactsName");
      }
    },
    /* 法人性别赋值于联系人性别 */
    crpGenderChange(e) {
      if (this.basicForm.isLegal == '1') {
        this.basicForm.contactsGender = e;
        this.$refs.basicForm.validateField("contactsGender");
      }
    },
    /* 法人手机号赋值于联系人手机号 */
    legalPersonPhoneChange(e) {
      if (this.basicForm.isLegal == '1') {
        this.basicForm.contactsPhone = e;
        this.$refs.basicForm.validateField("contactsPhone");
      }
    },
    /* 法人身份证号赋值于联系人身份证号 */
    legalPersonIdChange(e) {
      if (this.basicForm.isLegal == '1') {
        this.basicForm.contactPersonId = e;
        this.$refs.basicForm.validateField("contactPersonId");
      }
    },
    /* 法人身份证开始日期赋值于联系人身份证开始日期 */
    legalPersonIdSdateChange(e) {
      if (this.basicForm.isLegal == '1') {
        this.basicForm.idValiddateBegin = e;
        this.$refs.basicForm.validateField("idValiddateBegin");
      }
    },
    /* 法人身份证截止日期赋值于联系人身份证截止日期 */
    legalPersonIdEdateChange(e) {
      if (this.basicForm.isLegal == '1') {
        this.basicForm.idValiddateEnd = e;
        this.$refs.basicForm.validateField("idValiddateEnd");
      }
    },
    /* 法人身份证截止日期 长期选择 */
    legalPersonIdEdateCheckedChange(e) {
      if (e) {
        this.basicForm.legalPersonIdEdate = '2999-12-31 00:00:00';
        this.$refs.basicForm.validateField("legalPersonIdEdate");
        if (this.basicForm.isLegal == '1') {
          this.basicForm.idValiddateEnd = '2999-12-31 00:00:00';
          this.$refs.basicForm.validateField("idValiddateEnd");
        }
      } else {
        this.basicForm.legalPersonIdEdate = '';
        if (this.basicForm.isLegal == '1') {
          this.basicForm.idValiddateEnd = '';
          this.idValiddateEndChecked = false;
        }
      }
    },
    /* 营业执照截止日期 长期选择 */
    businessLicenceEDateCheckedChange(e) {
      if (e) {
        this.basicForm.businessLicenceEDate = '2999-12-31 00:00:00';
        this.$refs.basicForm.validateField("businessLicenceEDate");
      } else {
        this.basicForm.businessLicenceEDate = '';
      }
    },
    /* 联系人身份证截止日期 长期选择 */
    idValiddateEndCheckedChange(e) {
      if (e) {
        this.basicForm.idValiddateEnd = '2999-12-31 00:00:00';
        this.$refs.basicForm.validateField("idValiddateEnd");
      } else {
        this.basicForm.idValiddateEnd = '';
      }
    },
    /* 控股人身份证截止日期 长期选择 */
    holdPrsnCertExpDateCheckedChange(e) {
      if (e) {
        this.basicForm.holdPrsnCertExpDate = '2999-12-31 00:00:00';
        this.$refs.basicForm.validateField("holdPrsnCertExpDate");
      } else {
        this.basicForm.holdPrsnCertExpDate = '';
      }
    },
    /* 受益人身份证截止日期 长期选择 */
    receiptorCertExpDateCheckedChange(e) {
      if (e) {
        this.basicForm.receiptorCertExpDate = '2999-12-31 00:00:00';
        this.$refs.basicForm.validateField("receiptorCertExpDate");
      } else {
        this.basicForm.receiptorCertExpDate = '';
      }
    },
    /* 法人职业选择调取法人职位列表接口 */
    crpProfessionChange(e) {
      this.basicForm.crpProfessionLittle = '';
      this.getCrpProfessionLittle(e);
    },
    /* 法人职位列表接口 */
    getCrpProfessionLittle(val) {
      getCrpProfession(val).then((res) => {
        this.crpProfessionLittleOptions = res.data.data;
      });
    },
    /* 控股人身份证人像面上传 */
    httpHoldPrsnCertMfgPicRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.basicForm.holdPrsnCertMfgPic = data.link;
        this.basicForm.holdPrsnCertName = data.name; //控股人名称
        this.basicForm.holdPrsnCertNo = data.num;
        this.basicForm.holdPrsnGender = data.sex;
        this.$refs.basicForm.validateField("holdPrsnCertMfgPic");
      });
    },
    /* 控股人身份证人像面删除 */
    holdPrsnCertMfgPicRemove(file, fileList) {
      this.holdPrsnCertMfgPicList = fileList;
      this.basicForm.holdPrsnCertMfgPic = "";
    },
    beforeholdPrsnCertMfgPicRemove() {
      return this.$confirm(`确定移除控股人身份证人像面照片？`);
    },
    /* 控股人身份证国徽面上传 */
    httpHoldPrsnCertExpPicRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.basicForm.holdPrsnCertExpPic = res.data.data.link;
        this.basicForm.holdPrsnCertMfgDate = res.data.data.startDate;
        this.basicForm.holdPrsnCertExpDate = res.data.data.endDate;
        this.$refs.basicForm.validateField("holdPrsnCertExpPic");
      });
    },
    /* 控股人身份证国徽面删除 */
    holdPrsnCertExpPicRemove(file, fileList) {
      this.holdPrsnCertExpPicList = fileList;
      this.basicForm.holdPrsnCertExpPic = "";
    },
    beforeholdPrsnCertExpPicRemove() {
      return this.$confirm(`确定移除控股人身份证国徽面照片？`);
    },
    /* 受益人身份证人像面上传 */
    httpReceiptorCertMfgPicRequest(option) {
      uploadOCRCard(option.file, "1").then((res) => {
        let data = res.data.data;
        this.basicForm.receiptorCertMfgPic = data.link;
        this.basicForm.receiptorName = data.name; //受益人名称
        this.basicForm.receiptorCertNo = data.num;
        this.basicForm.receiptorGender = data.sex;
        this.basicForm.receiptorAdderss = data.address;
        this.$refs.basicForm.validateField("receiptorCertMfgPic");
      });
    },
    /* 受益人身份证人像面删除 */
    receiptorCertMfgPicRemove(file, fileList) {
      this.receiptorCertMfgPicList = fileList;
      this.basicForm.receiptorCertMfgPic = "";
    },
    beforereceiptorCertMfgPicRemove() {
      return this.$confirm(`确定移除受益人身份证人像面照片？`);
    },
    /* 受益人身份证国徽面上传 */
    httpReceiptorCertExpPicRequest(option) {
      uploadOCRCard(option.file, "2").then((res) => {
        this.basicForm.receiptorCertExpPic = res.data.data.link;
        this.basicForm.receiptorCertMfgDate = res.data.data.startDate;
        this.basicForm.receiptorCertExpDate = res.data.data.endDate;
        this.$refs.basicForm.validateField("receiptorCertExpPic");
      });
    },
    /* 受益人身份证国徽面删除 */
    receiptorCertExpPicRemove(file, fileList) {
      this.receiptorCertExpPicList = fileList;
      this.basicForm.receiptorCertExpPic = "";
    },
    beforereceiptorCertExpPicRemove() {
      return this.$confirm(`确定移除受益人身份证国徽面照片？`);
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  padding: 20px 40px 20px 0;
}
.basic-margin-top {
  margin-top: 40px;
}

/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}
</style>
